<template>
  <div class="challenge-page">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="spinner"></div>
      <p>加载挑战数据中...</p>
    </div>
    
    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <div class="error-icon">❌</div>
      <h3>加载失败</h3>
      <p>{{ error }}</p>
      <button @click="fetchTaskDetail" class="retry-button">重试</button>
    </div>
    
    <!-- 无数据状态 -->
    <div v-else-if="!challengeInfo" class="no-data-container">
      <div class="no-data-icon">📭</div>
      <h3>没有找到挑战</h3>
      <p>该挑战可能已被删除或不存在</p>
      <router-link to="/challenges" class="back-button">返回挑战列表</router-link>
    </div>
    
    <!-- 正常显示状态 - 改为双栏结构 -->
    <div v-else class="challenge-content">
      <!-- 左侧栏 - 任务概览 -->
      <div class="challenge-sidebar">
        <div class="status-badge">{{ getStatusText(challengeInfo.status) }}</div>
        
        <h1 class="challenge-title">{{ challengeInfo.title }}</h1>
        
        <!-- 基础信息组 - 网格布局 -->
        <div class="info-grid">
          <div class="info-item">
            <div class="info-label">类型：</div>
            <div class="info-value">{{ challengeInfo.category }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">难度：</div>
            <div class="info-value">
              <span v-for="n in challengeInfo.difficulty" :key="n" class="difficulty-dot"></span>
            </div>
          </div>
          <div class="info-item">
            <div class="info-label">状态：</div>
            <div :class="['info-value', 'status-' + challengeInfo.taskStatus]">
              {{ getStatusText(challengeInfo.status) }}
            </div>
          </div>
          <div class="info-item">
            <div class="info-label">开始时间：</div>
            <div class="info-value">{{ challengeInfo.startTime }}</div>
          </div>
          <div class="info-item">
            <div class="info-label">结束时间：</div>
            <div class="info-value">{{ challengeInfo.endTime }}</div>
          </div>
        </div>
        
        <!-- 任务描述 -->
        <div class="description-container">
          <h3 class="section-title">任务描述</h3>
          <p class="description-text">{{ challengeInfo.description }}</p>
          
          <!-- 根据任务完成状态显示不同内容 -->
          <div v-if="challengeInfo.isCompleted" class="task-completed-banner">
            <div class="completed-icon">🎉</div>
            <div class="completed-text">
              <h4>恭喜您，已完成挑战!</h4>
              <p>感谢您为环保事业做出的贡献</p>
            </div>
          </div>
          
          <!-- 只有当用户未接受任务且任务未完成时才显示接受挑战按钮 -->
          <button v-if="!hasAcceptedTask && !challengeInfo.isCompleted" class="btn btn-primary accept-challenge-btn" @click="handleAcceptChallenge">
            <i class="icon-plus"></i> 接受挑战
          </button>
        </div>
        
        <!-- 进度组件 - 只有用户已接受挑战时才显示 -->
        <div v-if="hasAcceptedTask && !challengeInfo.isCompleted" class="progress-section">
          <h3 class="section-title">进度</h3>
          <div class="progress-container circular">
            <div class="progress-circle-outer">
              <div class="progress-circle-inner">
                <div class="progress-value">
                  <div class="days-passed">{{ challengeInfo.currentDay }}</div>
                  <div class="days-label">已坚持天数</div>
                </div>
              </div>
            </div>
            <div class="progress-text">
              <div>已坚持<span class="highlight">{{ challengeInfo.currentDay }}</span>天</div>
              <div>剩余<span class="highlight-warning">{{ challengeInfo.totalDays - challengeInfo.currentDay }}</span>天</div>
              <div class="total-days">总计{{ challengeInfo.totalDays }}天</div>
            </div>
          </div>
        </div>
        
        <!-- 任务完成后的庆祝动画 -->
        <div v-if="challengeInfo.isCompleted" class="challenge-completed-container">
          <div class="celebration-animation">
            <div class="celebration-icon">🎖️</div>
            <div class="confetti-container">
              <div v-for="n in 20" :key="n" class="confetti" 
                   :style="{
                     '--delay': (n * 0.1) + 's', 
                     '--left': (n * 5) + '%',
                     '--bg': '#' + Math.floor(Math.random()*16777215).toString(16)
                   }">
              </div>
            </div>
          </div>
          
          <div class="achievement-details">
            <h3 class="achievement-title">挑战成功完成！</h3>
            <p class="achievement-description">您成功完成了 <span class="highlight">{{ challengeInfo.title }}</span> 挑战</p>
            <div class="achievement-stats">
              <div class="stat-item">
                <div class="stat-icon">⏱️</div>
                <div class="stat-value">{{ challengeInfo.totalDays }}天</div>
                <div class="stat-label">坚持时长</div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🏆</div>
                <div class="stat-value">{{ challengeInfo.pointsReward }}</div>
                <div class="stat-label">获得积分</div>
              </div>
              <div class="stat-item">
                <div class="stat-icon">🌍</div>
                <div class="stat-value">A+</div>
                <div class="stat-label">环保等级</div>
              </div>
            </div>
            
            <div class="achievement-actions">
              <button class="action-btn share-btn">
                <i class="action-icon">📤</i>
                分享成就
              </button>
              <button class="action-btn browse-btn">
                <i class="action-icon">🔍</i>
                探索更多挑战
              </button>
            </div>
          </div>
        </div>
        
        <!-- 未接受挑战时显示的提示 -->
        <div v-else-if="!hasAcceptedTask" class="no-progress-section">
          <div class="no-progress-message">
            <div class="no-progress-icon">🚀</div>
            <p>接受挑战后，您将在此处看到进度情况</p>
          </div>
        </div>
        
        <!-- 数据卡片 -->
        <div class="data-cards">
          <div class="data-card">
            <div class="data-icon">🏆</div>
            <div class="data-content">
              <div class="data-value">{{ challengeInfo.pointsReward }}</div>
              <div class="data-label">积分奖励</div>
            </div>
          </div>
          <div class="data-card">
            <div class="data-icon">👥</div>
            <div class="data-content">
              <div class="data-value">{{ challengeInfo.participants.count }}</div>
              <div class="data-label">参与人数</div>
            </div>
          </div>
        </div>
        
        <!-- 操作按钮 - 只有未完成任务才显示 -->
        <div v-if="hasAcceptedTask && !challengeInfo.isCompleted" class="action-buttons">
          <button class="action-button" @click="handleClock">
            <div class="action-icon">📝</div>
            <div class="action-text">今日打卡</div>
          </button>
          <button class="action-button" @click="handleAbandon">
            <div class="action-icon">❌</div>
            <div class="action-text">放弃任务</div>
          </button>
        </div>
        
        <!-- 背景装饰元素 -->
        <div class="decoration-elements">
          <div class="deco-leaf deco-leaf-1"></div>
          <div class="deco-leaf deco-leaf-2"></div>
          <div class="deco-leaf deco-leaf-3"></div>
          <div class="deco-circle deco-circle-1"></div>
          <div class="deco-circle deco-circle-2"></div>
        </div>
      </div>
      
      <!-- 垂直分隔线 -->
      <div class="vertical-divider"></div>
      
      <!-- 右侧栏 - 任务详情 -->
      <div class="challenge-main">
        <!-- 添加挑战规则区域到右上角 -->
        <div class="challenge-rules">
          <h3 class="rules-title">挑战规则</h3>
          <div class="rules-content">
            <div class="rule-item">
              <div class="rule-icon">📝</div>
              <div class="rule-text">每日完成任务并打卡记录</div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">⏱️</div>
              <div class="rule-text">24小时内只能打卡一次</div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">🔄</div>
              <div class="rule-text">连续完成获得额外奖励</div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">🏆</div>
              <div class="rule-text">全部完成后获得徽章认证</div>
            </div>
          </div>
        </div>
        
        <!-- 规则下方的动画效果 -->
        <div v-if="!challengeInfo.isCompleted" class="rules-animation">
          <div class="animation-track">
            <div class="animation-item">🌱</div>
            <div class="animation-item">🌿</div>
            <div class="animation-item">🌳</div>
            <div class="animation-item">🌎</div>
          </div>
          <div class="animation-caption">从小小的种子开始，助力地球可持续发展</div>
        </div>
        
        <!-- 移除选项卡导航，直接显示任务详情 -->
        <h3 class="main-title">7天挑战任务</h3>
        
        <!-- 使用ChallengeDetails组件 -->
        <challenge-details 
          :tasks="tasks"
          :has-accepted-task="hasAcceptedTask"
          :task-rules="taskRules"
          :is-task-completed="challengeInfo && challengeInfo.isCompleted"
          @connect-device="handleConnectDevice"
        />
        
        <!-- 任务列表 -->
        <div class="tasks-list">
          <div 
            v-for="task in tasks" 
            :key="task.day"
            class="task-card"
            :class="{ 
              completed: task.isCompleted, 
              'current-day': challengeInfo.currentDay === task.day,
              'future-day': challengeInfo.currentDay < task.day
            }"
          >
            <!-- 状态指示器 -->
            <div class="task-status-indicator" 
                 :class="{
                   'status-completed': task.isCompleted,
                   'status-current': challengeInfo.currentDay === task.day && !task.isCompleted,
                   'status-upcoming': challengeInfo.currentDay < task.day
                 }">
            </div>
            
            <!-- 任务序号徽章 -->
            <div class="task-day-badge">Day {{ task.day }}</div>
            
            <!-- 任务内容 -->
            <div class="task-content">
              <h4 class="task-title">{{ task.title }}</h4>
              <p class="task-description">{{ task.description }}</p>
              
              <div class="task-status-text">
                <span v-if="task.isCompleted" class="completed-badge">已完成</span>
                <span v-else-if="challengeInfo.currentDay === task.day" class="current-badge">今日任务</span>
                <span v-else class="upcoming-badge">即将开始</span>
              </div>
              
              <!-- 操作按钮 - 移除上传证明按钮 -->
              <div class="task-actions">
                <button class="task-action-btn view-example-btn">
                  查看示例
                </button>
              </div>
            </div>
            
            <!-- 示例图 -->
            <div v-if="task.exampleImage" class="task-image-container">
              <img :src="task.exampleImage" alt="示例图" class="task-image" />
              <div class="image-overlay">
                <div class="zoom-icon">🔍</div>
              </div>
            </div>
          </div>
          
          <!-- 占位符（第4天位置） -->
          <div v-if="tasks.length < 4 || !tasks.some(t => t.day === 4)" class="task-card placeholder">
            <div class="placeholder-content">
              <div class="placeholder-icon">⏳</div>
              <div class="placeholder-text">任务待更新</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论区移动到底部 -->
    <div v-if="challengeInfo" class="bottom-comments-section">
      <div class="comments-container">
        <h3 class="section-title">挑战交流</h3>
        
        <!-- 评论输入框 -->
        <div class="comment-input">
          <textarea 
            placeholder="分享你的挑战心得..." 
            v-model="newComment"
            class="comment-textarea"
          ></textarea>
          <button class="comment-submit" @click="submitComment">发表评论</button>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
          <div v-if="comments.length === 0" class="no-comments">
            暂无评论，快来分享你的看法吧！
          </div>
          <div v-for="(comment, index) in comments" :key="index" class="comment-item">
            <div class="comment-avatar">
              <img :src="comment.avatar || '/images/avatars/default.jpg'" alt="用户头像">
            </div>
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author || '匿名用户' }}</span>
                <span class="comment-time">{{ comment.time || '刚刚' }}</span>
              </div>
              <div class="comment-text">{{ comment.content }}</div>
              <div class="comment-actions">
                <button class="comment-like">
                  <i class="icon-like"></i> 
                  <span>{{ comment.likes || 0 }}</span>
                </button>
                <button class="comment-reply">回复</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景装饰元素 -->
    <div class="decoration-elements">
      <div class="deco-leaf deco-leaf-1"></div>
      <div class="deco-leaf deco-leaf-2"></div>
      <div class="deco-leaf deco-leaf-3"></div>
      <div class="deco-circle deco-circle-1"></div>
      <div class="deco-circle deco-circle-2"></div>
    </div>

    <!-- 打卡成就效果 -->
    <div v-if="showAchievement" class="achievement-animation">
      <div class="achievement-content">
        <div class="achievement-icon">🎉</div>
        <div class="achievement-text">
          <div class="achievement-title">打卡成功！</div>
          <div class="achievement-subtitle">继续坚持，地球因你更美好</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
// import ChallengeOverview from '@/components/challenge/ChallengeOverview.vue';
import { getTaskDetail, joinTask, isTaskAccepted, abandonTask, getTaskDays, clockTask } from '@/api/task'; // 添加clockTask API
import ChallengeDetails from '@/components/challenge/ChallengeDetails.vue'; // 导入ChallengeDetails组件

export default {
  name: 'ChallengeDetail',
  components: {
    // ChallengeOverview
    ChallengeDetails
  },
  data() {
    return {
      loading: true,
      challengeId: this.$route.params.id,
      error: null,
      data: null,
      activeTab: 'tasks',
      challengeInfo: null,
      tabs: [
        { id: 'tasks', name: '任务详情' },
        { id: 'rankings', name: '排行榜' },
        { id: 'knowledge', name: '环保知识' },
        { id: 'community', name: '社区动态' },
        { id: 'faq', name: '常见问题' }
      ],
      tasks: [],
      rankings: [],
      knowledge: [],
      posts: [],
      faqs: [],
      newPostContent: '',
      openFaqs: [],
      newComment: '',
      comments: [],
      hasAcceptedTask: false, // 新增状态标记用户是否已接受任务
      showAchievement: false,
      taskRules: []
    };
  },
  computed: {
    // 计算进度百分比
    progressPercentage() {
      if (!this.challengeInfo) return 0;
      // 进度百分比计算修正：确保值不超过100%
      const percentage = Math.min(100, Math.max(0, (this.challengeInfo.currentDay / this.challengeInfo.totalDays) * 100));
      // 确保值是整数，更容易控制显示
      return Math.floor(percentage);
    }
  },
  watch: {
    // 监听进度变化，更新环形进度条
    progressPercentage: {
      handler(newValue) {
        this.$nextTick(() => {
          const progressCircle = document.querySelector('.progress-circle-outer');
          if (progressCircle) {
            // 修复进度条显示，确保CSS变量值正确设置
            progressCircle.style.setProperty('--progress', `${newValue}%`);
          }
        });
      },
      immediate: true
    }
  },
  created() {
    this.fetchTaskDetail();
    this.checkTaskAcceptance(); // 添加检查任务接受状态的方法调用
    this.fetchTaskDays(); // 添加获取用户参与挑战天数的方法调用
  },
  methods: {
    // 获取任务详情数据
    async fetchTaskDetail() {
      this.loading = true;
      this.error = null;
      
      try {
        // 使用API工具获取任务详情，而不是直接创建axios实例
        const res = await getTaskDetail(Number(this.challengeId));
        
        // 如果响应成功且有数据
        if (res && res.data) {
          this.data = res.data;
          this.processTaskData();

          // 检查任务接受状态
          await this.checkTaskAcceptance();
          
          // 如果用户已接受任务，获取完成天数
          if (this.hasAcceptedTask) {
            await this.fetchTaskDays();
          }
        } else {
          this.error = '未能获取任务数据或数据格式不正确';
        }
      } catch (error) {
        console.error('获取任务详情失败:', error);
        this.error = `获取任务详情失败: ${error.message || '未知错误'}`;
      } finally {
        this.loading = false;
      }
    },
    
    // 获取用户参与挑战的天数
    async fetchTaskDays() {
      if (!this.challengeId || !this.hasAcceptedTask) {
        return;
      }
      
      try {
        const taskId = Number(this.challengeId);
        const response = await getTaskDays(taskId);
        
        if (response && response.code === 200 && response.data) {
          // 更新当前天数
          const days = response.data.days || 0;
          
          // 更新到challengeInfo中
          if (this.challengeInfo) {
            this.challengeInfo.currentDay = days;
            
            // 更新任务规则的完成状态 - 直接根据days判断
            if (this.taskRules && this.taskRules.length > 0 && days > 0) {
              this.taskRules.forEach((rule) => {
                // 如果规则天数小于等于已完成天数，则标记为已完成
                rule.isCompleted = rule.ruleDay <= days ? 1 : 0;
              });
            }
            
            // 更新进度条
            this.$nextTick(() => {
              const progressCircle = document.querySelector('.progress-circle-outer');
              if (progressCircle) {
                const percentage = Math.min(100, Math.max(0, (days / this.challengeInfo.totalDays) * 100));
                progressCircle.style.setProperty('--progress', `${Math.floor(percentage)}%`);
              }
            });
          }
        }
      } catch (error) {
        console.error('获取用户参与挑战天数失败:', error);
      }
    },
    
    // 检查用户是否已接受任务
    async checkTaskAcceptance() {
      if (!this.challengeId) {
        console.error('挑战ID不存在，无法检查接受状态');
        return;
      }
      
      try {
        const taskId = Number(this.challengeId);
        console.log('正在检查用户是否已接受任务，任务ID:', taskId);
        
        const response = await isTaskAccepted(taskId);
        console.log('检查任务接受状态响应:', response);
        
        if (response && (response.code === 200 || response.success)) {
          // 修正逻辑：当API返回false时表示用户已接受任务
          this.hasAcceptedTask = !response.data;
          console.log('用户已接受任务状态:', this.hasAcceptedTask);
          
          // 如果用户已接受任务，立即获取参与天数
          if (this.hasAcceptedTask) {
            this.fetchTaskDays();
          }
        } else {
          console.error('检查任务接受状态失败:', response);
          // 默认为未接受
          this.hasAcceptedTask = false;
        }
      } catch (error) {
        console.error('检查任务接受状态出错:', error);
        // 出错默认为未接受
        this.hasAcceptedTask = false;
      }
    },
    
    // 处理任务数据
    processTaskData() {
      // 获取任务数据
      const taskData = this.data;
      
      if (!taskData) {
        console.error('没有可处理的任务数据');
        return;
      }
      
      // 计算进度百分比
      const now = new Date().getTime();
      const start = new Date(taskData.startTime).getTime();
      const end = new Date(taskData.endTime).getTime();
      
      // 修正进度百分比计算逻辑
      let progress = 0;
      if (now >= start) {
        progress = Math.floor(((now - start) / (end - start)) * 100);
        progress = Math.min(100, Math.max(0, progress)); // 确保在0-100范围内
      }
      
      // 计算天数
      const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
      const passedDays = Math.max(0, Math.floor((now - start) / (1000 * 60 * 60 * 24)));
      
      // 获取状态文本
      const getStatusText = (status) => {
        const statusMap = {
          0: 'upcoming',
          1: 'ongoing',
          2: 'completed',
          3: 'expired'
        };
        return statusMap[status] || 'unknown';
      };
      
      // 获取难度值
      const getDifficultyValue = () => {
        const difficultyMap = {
          0: 1,
          1: 2,
          2: 3
        };
        return difficultyMap[taskData.taskDifficulty] || 1;
      };
      
      // 构建数据结构
      this.challengeInfo = {
        id: taskData.id.toString(),
        title: taskData.taskName,
        coverImage: '/images/challenges/default.jpg',
        status: getStatusText(taskData.taskStatus),
        currentDay: passedDays > 0 ? passedDays : 0,
        totalDays: totalDays,
        pointsReward: taskData.pointReward || 200,
        participants: {
          count: taskData.participantCount || 0,
          avatars: taskData.participantAvatars || []
        },
        isParticipating: taskData.isParticipating || false,
        description: taskData.taskDescription,
        category: taskData.taskType,
        difficulty: getDifficultyValue(),
        progress: progress > 0 ? (progress > 100 ? 100 : progress) : 0,
        startTime: new Date(taskData.startTime).toLocaleDateString('zh-CN'),
        endTime: new Date(taskData.endTime).toLocaleDateString('zh-CN'),
        taskStatus: taskData.taskStatus,
        isCompleted: taskData.isCompleted === 1 // 新增：是否完成
      };
      
      this.tasks = taskData.tasks || [];
      // 处理任务规则数据 - 新增代码
      if (taskData.taskDTOList && taskData.taskDTOList.length > 0) {
        console.log('获取到任务规则数据：', taskData.taskDTOList);
        // 只有在整个任务完成时，才自动将所有规则标记为已完成
        if (taskData.isCompleted === 1) {
          taskData.taskDTOList.forEach(rule => {
            rule.isCompleted = 1;
          });
        } else {
          // 否则保持原始状态，稍后由 fetchTaskDays 方法更新完成状态
          console.log('任务未完成，将由 fetchTaskDays 方法更新规则完成状态');
        }
        this.taskRules = taskData.taskDTOList; // 存储规则数据
      } else {
        console.log('无任务规则数据');
        this.taskRules = [];
      }
      
      this.rankings = taskData.rankings || [];
      this.knowledge = taskData.knowledge || [];
      this.posts = taskData.posts || [];
      this.faqs = taskData.faqs || [];
    },
    
    // 参与挑战
    handleParticipate() {
      if (!this.challengeId) {
        console.error('挑战ID不存在');
        alert('错误：挑战ID不存在');
        return;
      }
      
      // 转换为数字类型
      const taskId = Number(this.challengeId);
      console.log('准备参与任务，任务ID:', taskId);
      
      this.loading = true;
      joinTask(taskId)
        .then(response => {
          console.log('参与任务成功，响应数据:', JSON.stringify(response, null, 2));
          if (response.code === 200 || response.success) {
            // 提示成功
            alert('成功接受挑战！');
            // 更新UI状态
            this.hasAcceptedTask = true; // 更新任务接受状态
            if (this.challengeInfo) {
              this.challengeInfo.isParticipating = true;
            }
            
            // 获取用户已参与挑战的天数
            this.fetchTaskDays();
          } else {
            const errorMsg = response.message || '未知错误';
            alert('接受挑战失败：' + errorMsg);
          }
        })
        .catch(error => {
          console.error('参与任务失败:', error);
          console.error('错误详情:', error.response ? error.response.data : '无响应数据');
          alert('接受挑战失败，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 接收挑战 - 直接使用参与挑战的逻辑
    handleAcceptChallenge() {
      console.log('点击接收挑战按钮，挑战ID:', this.challengeId);
      this.handleParticipate();
    },
    
    handleShare() {
      console.log('分享挑战');
    },
    
    handleConnectDevice() {
      console.log('连接设备');
    },
    
    handleLike(postId) {
      console.log('点赞动态', postId);
    },
    
    handleComment(postId) {
      console.log('评论动态', postId);
    },
    
    toggleFaq(id) {
      if (this.openFaqs.includes(id)) {
        this.openFaqs = this.openFaqs.filter((i) => i !== id);
      } else {
        this.openFaqs.push(id);
      }
    },
    
    submitPost() {
      console.log('提交新帖子', this.newPostContent);
      this.newPostContent = '';
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'ongoing': '进行中',
        'completed': '已完成',
        'upcoming': '即将开始',
        'expired': '已过期'
      };
      return statusMap[status] || '进行中';
    },
    
    submitComment() {
      console.log('提交新评论', this.newComment);
      this.newComment = '';
    },

    // 处理放弃任务
    handleAbandon() {
      if (!this.challengeId) {
        console.error('挑战ID不存在');
        alert('错误：挑战ID不存在');
        return;
      }
      
      // 转换为数字类型
      const taskId = Number(this.challengeId);
      console.log('准备放弃任务，任务ID:', taskId);
      
      // 确认是否要放弃
      if (!confirm('确定要放弃此挑战吗？这将失去您已获得的进度。')) {
        return;
      }
      
      this.loading = true;
      abandonTask(taskId)
        .then(response => {
          console.log('放弃任务成功，响应数据:', JSON.stringify(response, null, 2));
          if (response.code === 200 || response.success) {
            // 提示成功
            alert('已成功放弃挑战！');
            // 更新UI状态
            this.hasAcceptedTask = false; // 更新任务接受状态
            if (this.challengeInfo) {
              this.challengeInfo.isParticipating = false;
            }
          } else {
            const errorMsg = response.message || '未知错误';
            alert('放弃挑战失败：' + errorMsg);
          }
        })
        .catch(error => {
          console.error('放弃任务失败:', error);
          console.error('错误详情:', error.response ? error.response.data : '无响应数据');
          alert('放弃挑战失败，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    
    // 处理每日打卡
    handleClock() {
      if (!this.challengeId) {
        console.error('挑战ID不存在');
        alert('错误：挑战ID不存在');
        return;
      }
      
      // 转换为数字类型
      const taskId = Number(this.challengeId);
      console.log('准备打卡，任务ID:', taskId);
      
      this.loading = true;
      clockTask(taskId)
        .then(response => {
          console.log('打卡响应数据:', JSON.stringify(response, null, 2));
          if (response && response.code === 200) {
            const isSuccess = response.data;
            
            if (isSuccess === true) {
              // 打卡成功
              alert('打卡成功！已记录您今日的挑战进度。');
              // 触发成就效果
              this.showAchievementEffect();
              
              // 重新获取任务详情 - 特别是在最后一天打卡后，检查任务是否完成
              this.fetchTaskDetail();
            } else {
              // 已经打过卡了
              alert('您今日已经打过卡了，请24小时后再来。');
            }
          } else {
            const errorMsg = response.message || '未知错误';
            alert('打卡失败：' + errorMsg);
          }
        })
        .catch(error => {
          console.error('打卡出错:', error);
          console.error('错误详情:', error.response ? error.response.data : '无响应数据');
          alert('打卡失败，请稍后重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 显示打卡成就效果
    showAchievementEffect() {
      // 创建成就效果元素
      const achievementEl = document.createElement('div');
      achievementEl.className = 'achievement-animation';
      achievementEl.innerHTML = `
        <div class="achievement-content">
          <div class="achievement-icon">🎉</div>
          <div class="achievement-text">
            <div class="achievement-title">打卡成功！</div>
            <div class="achievement-subtitle">继续坚持，地球因你更美好</div>
          </div>
        </div>
        <div class="achievement-particles"></div>
      `;
      
      // 添加到文档
      document.body.appendChild(achievementEl);
      
      // 触发动画
      setTimeout(() => {
        achievementEl.classList.add('show');
        
        // 创建粒子效果
        this.createParticles(achievementEl.querySelector('.achievement-particles'));
        
        // 移除元素
        setTimeout(() => {
          achievementEl.classList.remove('show');
          setTimeout(() => {
            document.body.removeChild(achievementEl);
          }, 500);
        }, 3000);
      }, 100);
    },

    // 创建粒子效果
    createParticles(container) {
      const colors = ['#4CAF50', '#8BC34A', '#CDDC39', '#FFC107', '#FF9800'];
      const shapes = ['circle', 'square', 'triangle'];
      
      // 创建50个粒子
      for (let i = 0; i < 50; i++) {
        const particle = document.createElement('div');
        particle.className = `particle ${shapes[Math.floor(Math.random() * shapes.length)]}`;
        particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        
        // 随机位置和大小
        particle.style.top = `${50 + (Math.random() * 50 - 25)}%`;
        particle.style.left = `${50 + (Math.random() * 50 - 25)}%`;
        particle.style.width = `${4 + Math.random() * 6}px`;
        particle.style.height = particle.style.width;
        
        // 随机动画延迟和持续时间
        particle.style.animationDelay = `${Math.random() * 0.5}s`;
        particle.style.animationDuration = `${0.5 + Math.random() * 1}s`;
        
        container.appendChild(particle);
      }
    }
  }
}
</script>

<style>
/* 不使用scoped，确保样式全局应用 */
@import '../styles/Challenge.css';

/* 挑战详情页双栏结构 */
.challenge-content {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 左侧栏 - 任务概览 */
.challenge-sidebar {
  width: 40%;
  padding: 24px;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  border-radius: 12px 0 0 12px;
  position: relative;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.challenge-sidebar:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* 未接受挑战时的提示样式 */
.no-progress-section {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.no-progress-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.no-progress-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0) 50%, rgba(76, 175, 80, 0.05) 100%);
  transform: rotate(45deg);
  animation: shimmer 3s infinite linear;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.no-progress-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.no-progress-icon {
  font-size: 32px;
  margin-bottom: 12px;
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.no-progress-message p {
  color: #666;
  font-size: 14px;
}

/* 垂直分隔线 */
.vertical-divider {
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    #D8D8D8,
    #D8D8D8 5px,
    transparent 5px,
    transparent 10px
  );
  margin: 0;
  position: relative;
}

.vertical-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(76, 175, 80, 0.6),
    rgba(76, 175, 80, 0.6) 5px,
    transparent 5px,
    transparent 10px
  );
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s ease;
  animation: progressFlow 2.5s ease-in-out 0.5s forwards;
}

@keyframes progressFlow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* 右侧栏 - 任务详情 */
.challenge-main {
  width: 60%;
  padding: 24px;
  background-color: #f5f5f5;
  border-radius: 0 12px 12px 0;
  min-height: 800px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.challenge-main:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* 状态徽章 */
.status-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #4CAF50;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
  z-index: 2;
}

.status-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.4);
}

/* 标题样式 */
.challenge-title {
  font-size: 28px;
  margin-bottom: 24px;
  color: #333;
  font-weight: 700;
  padding-right: 40px; /* 为徽章留出空间 */
  position: relative;
  display: inline-block;
}

.challenge-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

.challenge-title:hover::after {
  width: 100%;
}

/* 基础信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);
}

.info-grid:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateY(-2px);
}

.info-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* 难度点 */
.difficulty-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #388E3C;
  margin-right: 4px;
  transition: all 0.3s ease;
}

.difficulty-dot:nth-child(1) {
  animation: pulseDot 1.5s infinite 0.1s;
}

.difficulty-dot:nth-child(2) {
  animation: pulseDot 1.5s infinite 0.3s;
}

.difficulty-dot:nth-child(3) {
  animation: pulseDot 1.5s infinite 0.5s;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* 环形进度条 */
.progress-section {
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.progress-section:hover {
  transform: translateY(-3px);
}

.progress-container.circular {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent; /* 移除可能的背景干扰 */
  height: auto; /* 覆盖默认进度条高度 */
  position: relative;
}

.progress-circle-outer {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(#4CAF50 0% var(--progress, 0%), #e0e0e0 var(--progress, 0%) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.5s ease;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

.progress-circle-outer:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
}

.progress-circle-outer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(transparent 0% var(--progress, 0%), rgba(255, 255, 255, 0.1) var(--progress, 0%) 100%);
  animation: rotateProgress 3s linear infinite;
  opacity: 0.8;
}

@keyframes rotateProgress {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.progress-circle-inner {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.progress-circle-inner::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0) 50%, rgba(76, 175, 80, 0.05) 100%);
  transform: rotate(45deg);
  animation: shimmer 2s infinite linear;
  pointer-events: none;
}

.progress-value {
  text-align: center;
  position: relative;
  z-index: 2;
}

.days-passed {
  font-size: 20px;
  font-weight: 700;
  color: #388E3C;
  transition: all 0.3s ease;
}

.progress-circle-inner:hover .days-passed {
  transform: scale(1.1);
  color: #2E7D32;
}

.days-label {
  font-size: 10px;
  color: #666;
}

.progress-text {
  padding-left: 20px;
  font-size: 14px;
  color: #666;
}

.highlight {
  color: #388E3C;
  font-weight: 700;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #388E3C;
  transition: width 0.3s ease;
}

.highlight:hover {
  color: #2E7D32;
}

.highlight:hover::after {
  width: 100%;
}

.highlight-warning {
  color: #F44336;
  font-weight: 700;
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.highlight-warning::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #F44336;
  transition: width 0.3s ease;
}

.highlight-warning:hover {
  color: #D32F2F;
}

.highlight-warning:hover::after {
  width: 100%;
}

.total-days {
  color: #999;
  font-size: 12px;
  margin-top: 4px;
}

/* 数据卡片 */
.data-cards {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.data-card {
  flex: 1;
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.data-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, rgba(76, 175, 80, 0.05) 0%, rgba(76, 175, 80, 0) 50%, rgba(76, 175, 80, 0.05) 100%);
  transform: rotate(45deg);
  animation: shimmer 3s infinite linear;
  pointer-events: none;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.data-icon {
  font-size: 24px;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.data-card:hover .data-icon {
  transform: scale(1.1) rotate(10deg);
}

.data-content {
  flex: 1;
}

.data-value {
  font-size: 20px;
  font-weight: 700;
  color: #388E3C;
  transition: all 0.3s ease;
}

.data-card:hover .data-value {
  transform: scale(1.05);
  color: #2E7D32;
}

.data-label {
  font-size: 12px;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.action-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 10px;
  border: none;
  border-radius: 10px;
  background-color: #f5f5f5;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-button:first-child {
  background-color: #E8F5E9;
  color: #2E7D32;
}

.action-button:last-child {
  background-color: #FFEBEE;
  color: #C62828;
}

.action-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.action-text {
  font-size: 14px;
  font-weight: bold;
}

/* 打卡按钮特效 */
.btn-clock {
  position: relative;
  overflow: hidden;
}

.btn-clock .btn-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.btn-clock .btn-effects::before,
.btn-clock .btn-effects::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  transition: transform 0.5s ease-out;
}

.btn-clock .btn-effects::before {
  width: 20px;
  height: 20px;
  left: 10px;
  top: 10px;
}

.btn-clock .btn-effects::after {
  width: 15px;
  height: 15px;
  right: 10px;
  bottom: 10px;
}

.btn-clock:hover .btn-effects::before,
.btn-clock:hover .btn-effects::after {
  transform: scale(4);
  opacity: 0;
}

.btn-danger {
  background-color: #F44336;
  color: white;
}

.btn-danger:hover {
  background-color: #D32F2F;
  box-shadow: 0 4px 8px rgba(211, 47, 47, 0.2);
}

.btn-outline {
  background-color: transparent;
  color: #388E3C;
  border: 1px solid #388E3C;
  position: relative;
  z-index: 1;
}

.btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(56, 142, 60, 0.1);
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.3s ease;
  z-index: -1;
  border-radius: 8px;
}

.btn-outline:hover {
  background-color: transparent;
}

.btn-outline:hover::after {
  transform: scaleY(1);
}

/* 图标模拟 */
.icon-check::before {
  content: "✓";
}

.icon-share::before {
  content: "↗";
}

.icon-plus::before {
  content: "+";
}

.icon-close::before {
  content: "✕";
}

.icon-like::before {
  content: "❤️";
}

/* 任务卡片 */
.task-card {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  min-height: 120px;
  display: flex;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out;
  animation-fill-mode: both;
}

.task-card:nth-child(1) { animation-delay: 0.1s; }
.task-card:nth-child(2) { animation-delay: 0.2s; }
.task-card:nth-child(3) { animation-delay: 0.3s; }
.task-card:nth-child(4) { animation-delay: 0.4s; }

.task-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.task-card.completed {
  border-left-color: #4CAF50;
}

.task-card.current-day {
  border-left-color: #FFC107;
}

.task-card.future-day {
  border-left-color: #BDBDBD;
}

/* 状态指示器 */
.task-status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.status-completed {
  background-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  animation: pulseGlow 2s infinite;
}

.status-current {
  background-color: #FFC107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
  animation: pulseGlow 2s infinite;
}

.status-upcoming {
  background-color: #BDBDBD;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(76, 175, 80, 0.6); }
  50% { box-shadow: 0 0 16px rgba(76, 175, 80, 0.8); }
}

/* 装饰元素 */
.decoration-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.deco-leaf {
  position: absolute;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234CAF50' opacity='0.1' d='M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3A4.49,4.49,0,0,0,8,20a4,4,0,0,0,4-4,4,4,0,0,0-4-4c0,0-.5.08-.77.08C7.15,12.08,6.5,10.5,6,8c-0.5-2.5-.5-6,.5-7A19.19,19.19,0,0,1,12,5C16,7,20,8,22,8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
}

.deco-leaf-1 {
  top: 10%;
  left: 5%;
  animation: floatElement 8s ease-in-out infinite;
  transform: rotate(30deg);
}

.deco-leaf-2 {
  bottom: 15%;
  right: 8%;
  animation: floatElement 10s ease-in-out infinite 1s;
  transform: rotate(-20deg) scale(0.7);
}

.deco-leaf-3 {
  top: 60%;
  left: 20%;
  animation: floatElement 12s ease-in-out infinite 2s;
  transform: rotate(120deg) scale(0.9);
}

.deco-circle {
  position: absolute;
  background: radial-gradient(circle, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0) 70%);
  border-radius: 50%;
}

.deco-circle-1 {
  width: 200px;
  height: 200px;
  top: -50px;
  right: -50px;
  animation: pulseSlow 15s infinite;
}

.deco-circle-2 {
  width: 300px;
  height: 300px;
  bottom: -100px;
  left: -100px;
  animation: pulseSlow 18s infinite 2s;
}

@keyframes floatElement {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(5px, -5px) rotate(5deg); }
  50% { transform: translate(0, 8px) rotate(-5deg); }
  75% { transform: translate(-5px, -3px) rotate(2deg); }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.2; }
}

/* 规则区域样式 */
.challenge-rules {
  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.challenge-rules:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.rules-title {
  font-size: 18px;
  font-weight: 700;
  color: #1976D2;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}

.rules-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #1976D2;
  transition: width 0.3s ease;
}

.rules-title:hover::after {
  width: 100%;
}

.rules-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.rule-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.rule-item:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.rule-icon {
  font-size: 20px;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

.rule-item:hover .rule-icon {
  transform: scale(1.2);
}

.rule-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

/* 规则下方动画效果 */
.rules-animation {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.animation-track {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
  position: relative;
}

.animation-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    #4CAF50 15%, 
    #4CAF50 85%, 
    transparent 100%
  );
  transform: translateY(-50%);
  z-index: 0;
}

.animation-item {
  font-size: 24px;
  position: relative;
  z-index: 1;
  background-color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  animation: growAndShrink 3s infinite;
}

.animation-item:nth-child(1) { animation-delay: 0s; }
.animation-item:nth-child(2) { animation-delay: 0.75s; }
.animation-item:nth-child(3) { animation-delay: 1.5s; }
.animation-item:nth-child(4) { animation-delay: 2.25s; }

@keyframes growAndShrink {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.animation-caption {
  font-size: 14px;
  color: #388E3C;
  margin-top: 10px;
  font-style: italic;
  opacity: 0.8;
}

/* 底部评论区样式 */
.bottom-comments-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out;
}

.bottom-comments-section:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.comments-container {
  width: 100%;
}

.comment-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.comment-textarea {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  transition: all 0.3s ease;
}

.comment-textarea:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
  outline: none;
}

.comment-submit {
  align-self: flex-end;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.comment-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s ease;
}

.comment-submit:hover {
  background-color: #388E3C;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
}

.comment-submit:hover::before {
  left: 100%;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.no-comments {
  text-align: center;
  padding: 30px;
  color: #757575;
  font-style: italic;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.comment-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #f9f9f9;
  transition: all 0.3s ease;
}

.comment-item:hover {
  background-color: #f0f0f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.comment-avatar {
  flex-shrink: 0;
}

.comment-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.comment-item:hover .comment-avatar img {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.comment-content {
  flex-grow: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: 600;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #757575;
}

.comment-text {
  margin-bottom: 12px;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.comment-like, .comment-reply {
  background: none;
  border: none;
  color: #757575;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.comment-like:hover, .comment-reply:hover {
  color: #4CAF50;
  transform: translateY(-1px);
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-completed-banner {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding: 15px;
  background-color: #E8F5E9;
  border-radius: 12px;
  border-left: 4px solid #4CAF50;
  animation: fadeInUp 0.5s ease-out;
}

.completed-icon {
  font-size: 2.5rem;
  margin-right: 15px;
  animation: bounce 1s infinite alternate;
}

.completed-text h4 {
  color: #2E7D32;
  margin: 0 0 5px 0;
  font-size: 18px;
}

.completed-text p {
  color: #388E3C;
  margin: 0;
  font-size: 14px;
}

@keyframes bounce {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}

/* 添加任务完成后的庆祝动画样式 */
.challenge-completed-container {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  animation: fadeIn 0.8s ease-out;
}

.celebration-animation {
  position: relative;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  overflow: hidden;
}

.celebration-icon {
  font-size: 5rem;
  animation: pulseAndRotate 2s infinite ease-in-out;
  position: relative;
  z-index: 5;
  text-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
}

.confetti-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -20px;
  left: var(--left, 50%);
  opacity: 0;
  background-color: var(--bg, #4CAF50);
  border-radius: 50%;
  animation: confettiFall 3s var(--delay, 0s) infinite;
}

.achievement-details {
  text-align: center;
  padding: 0 20px;
}

.achievement-title {
  font-size: 24px;
  color: #388E3C;
  margin-bottom: 10px;
  font-weight: bold;
}

.achievement-description {
  font-size: 16px;
  color: #555;
  margin-bottom: 20px;
}

.achievement-description .highlight {
  color: #1B5E20;
  font-weight: bold;
}

.achievement-stats {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}

.stat-item {
  text-align: center;
  padding: 0 15px;
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2E7D32;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 0.9rem;
  color: #757575;
}

.achievement-actions {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 15px;
}

.action-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.share-btn {
  background-color: #4CAF50;
  color: white;
}

.browse-btn {
  background-color: #f5f5f5;
  color: #333;
}

.action-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.action-icon {
  margin-right: 8px;
  font-style: normal;
}

@keyframes pulseAndRotate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.1) rotate(5deg);
  }
  50% {
    transform: scale(1) rotate(0deg);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(300px) rotate(720deg);
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 